﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ribbon_Playground.aspx.cs" Inherits="Default" %>

<%@ Register src="Ribbon/Ribbon_BigItem.ascx" tagname="Ribbon_BigItem" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_SmallItem.ascx" tagname="Ribbon_SmallItem" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_Group.ascx" tagname="Ribbon_Group" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_Separator.ascx" tagname="Ribbon_Separator" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_Zone.ascx" tagname="Ribbon_Zone" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_DualGroup.ascx" tagname="Ribbon_DualGroup" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_IconItem.ascx" tagname="Ribbon_IconItem" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_MultiLineGroup.ascx" tagname="Ribbon_MultiLineGroup" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_DDSmallItem.ascx" tagname="Ribbon_DDSmallItem" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_DDIconItem.ascx" tagname="Ribbon_DDIconItem" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_DDBigItem.ascx" tagname="Ribbon_DDBigItem" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_Gallery.ascx" tagname="Ribbon_Gallery" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_GallerySubItem.ascx" tagname="Ribbon_GallerySubItem" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_FileMenu.ascx" tagname="Ribbon_FileMenu" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_FileMenuItem.ascx" tagname="Ribbon_FileMenuItem" tagprefix="SBRibbon" %>
<%@ Register src="Ribbon/Ribbon_ColorPicker.ascx" tagname="Ribbon_ColorPicker" tagprefix="SBRibbon" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Office 2010 Ribbon Test</title>
    <link href="Ribbon/Ribbon.css" rel="stylesheet" type="text/css" />
    <script src="Ribbon/Ribbon.js"></script>
   </head>
<body> 
    <form id="form1" runat="server">
    
<ajaxToolkit:ToolkitScriptManager runat="server"  ID="ScriptManager1">
    </ajaxToolkit:ToolkitScriptManager>    
    
    <script>
        // Some Javascript used by Ribbon items
        function TestJS() {
            alert("Hello world !");
        }

        function TestColorPicker1(val) {
            alert("ColorPicker 1 -> Selected color : \"" + val + "\"");
        }

        function TestColorPicker2(val) {
            alert("ColorPicker 2 -> Selected color : \"" + val + "\"");
        }
    </script>
    
    <div style="font-size:8pt; text-align:center;">
    Ribbon Playground
    </div>
    
    
    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" CssClass="SBRibbon-theme">
        <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
            <HeaderTemplate>
                Mise en forme
            </HeaderTemplate>
            <ContentTemplate>
                <SBRibbon:Ribbon_Zone ID="Ribbon_Zone3" runat="server">
                    <ContentTemplate>
                    
                        <SBRibbon:Ribbon_Group ID="Ribbon_Group8" runat="server" Text="Group One">
                            <ContentTemplate>
                                <SBRibbon:Ribbon_SmallItem ID="Ribbon_SmallItem11" runat="server" ImageUrl="../Img/reply-group.png"
                                    Text="Test Click" Tooltip="Some Tooltip..." />
                                <SBRibbon:Ribbon_SmallItem OnClientClick="TestJS()" ID="Ribbon_SmallItem12" runat="server"
                                    ImageUrl="../Img/reply-group.png" Text="Javascript test" Tooltip="Some Tooltip..." />
                                <SBRibbon:Ribbon_SmallItem ID="Ribbon_SmallItem1" runat="server" ImageUrl="../Img/icon_excel.gif"
                                    Text="Envoyer vers Excel" Tooltip="Some Tooltip..." />
                            </ContentTemplate>
                        </SBRibbon:Ribbon_Group>
                        
                        <SBRibbon:Ribbon_Group ID="Ribbon_Group9" runat="server" Text="Ribbon">
                            <ContentTemplate>
                                <SBRibbon:Ribbon_BigItem OnClientClick="TestJS()" ID="Ribbon_BigItem6" runat="server"
                                    ImageUrl="../img/hp_tabsgraph.png" Text="Ajouter un<br>graphique" Tooltip="Some Tooltip..." />
                            </ContentTemplate>
                        </SBRibbon:Ribbon_Group>
                        
                        <SBRibbon:Ribbon_Group ID="Ribbon_Group10" runat="server" Text="Modification">
                            <ContentTemplate>
                                <SBRibbon:Ribbon_SmallItem ID="Ribbon_SmallItem13" runat="server" ImageUrl="../Img/send.png"
                                    Text="Envoyer au groupe" Tooltip="Some Tooltip..." />
                                <SBRibbon:Ribbon_SmallItem ID="Ribbon_SmallItem14" runat="server" ImageUrl="../Img/send.png"
                                    Text="Transférer au groupe" Tooltip="Some Tooltip..." />
                                <SBRibbon:Ribbon_SmallItem ID="Ribbon_SmallItem15" runat="server" ImageUrl="../Img/attach.png"
                                    Text="Attacher un élément" Tooltip="Some Tooltip..." />
                            </ContentTemplate>
                        </SBRibbon:Ribbon_Group>
                        
                        <SBRibbon:Ribbon_DualGroup ID="Ribbon_DualGroup1" runat="server" Text="Dual Group">
                            <LeftContentTemplate>
                                <SBRibbon:Ribbon_BigItem ID="Ribbon_BigItem4" runat="server" ImageUrl="../img/hp_refreshgraph.png"
                                    Text="Rafraichir<br>le graphique" Tooltip="Some Tooltip..." />
                            </LeftContentTemplate>
                            <RightContentTemplate>
                                <SBRibbon:Ribbon_SmallItem ID="Ribbon_SmallItem2" runat="server" ImageUrl="../Img/send.png"
                                    Text="Envoyer au groupe" Tooltip="Hello world..." />
                                <SBRibbon:Ribbon_SmallItem ID="Ribbon_SmallItem6" runat="server" ImageUrl="../Img/reply-sender.png"
                                    Text="Actualiser la tache" Tooltip="Click here" />
                                <SBRibbon:Ribbon_SmallItem ID="Ribbon_SmallItem10" runat="server" ImageUrl="../Img/favorites.png"
                                    Text="Ajouter aux favoris" Tooltip="Test" />
                            </RightContentTemplate>
                        </SBRibbon:Ribbon_DualGroup>
                        
                        <SBRibbon:Ribbon_Group ID="Ribbon_Group7" runat="server" Text="Aide & Support">
                            <ContentTemplate>
                                <SBRibbon:Ribbon_BigItem ID="Ribbon_BigItem7" runat="server" ImageUrl="../img/help.png"
                                    Text="Rubriques<br>d'aide" Tooltip="Some Tooltip..." />
                                <SBRibbon:Ribbon_BigItem ID="Ribbon_BigItem8" runat="server" ImageUrl="../img/help.png"
                                    Text="Support<br>en ligne" Tooltip="Some Tooltip..." />
                            </ContentTemplate>
                        </SBRibbon:Ribbon_Group>
                        
                    </ContentTemplate>
                </SBRibbon:Ribbon_Zone>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        
        <ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
            <HeaderTemplate>
                Lorem Ipsum
            </HeaderTemplate>
            <ContentTemplate>
                <SBRibbon:Ribbon_Zone ID="Ribbon_Zone4" runat="server">
                    <ContentTemplate>
                        <li>Create custom groups or whatever...<br />
                            Insert standard elements or anything else</li>
                        <SBRibbon:Ribbon_Separator runat="server" />
                        <li>
                            <asp:Button ID="Button1" runat="server" Text="Button" /></li>
                    </ContentTemplate>
                </SBRibbon:Ribbon_Zone>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
    
    
    
    <!-- Put this Control outside of the Tabs Container -->
    <SBRibbon:Ribbon_FileMenu ID="Ribbon_FileMenu1" runat="server">
        <ContentTemplate>
            <SBRibbon:Ribbon_FileMenuItem ID="Ribbon_FileMenuItem1" runat="server" Text="File Menu Item 1" ImageUrl="../Img/next.png" />
            <SBRibbon:Ribbon_FileMenuItem ID="Ribbon_FileMenuItem2" runat="server" Text="File Menu Item 2" ImageUrl="../Img/prev.png" />
            <SBRibbon:Ribbon_FileMenuItem ID="Ribbon_FileMenuItem3" runat="server" Text="File Menu Item 3" ImageUrl="../Img/reply.png" />                                                                           
        </ContentTemplate>
    </SBRibbon:Ribbon_FileMenu>
 
 
    <p>
    Here are some Javascript functions to work with the Ribbon...
    </p>
    
    <script>
            // Toggle the Ribbon
            function ToggleRibbon() {
                var obj = document.getElementById("<%=this.TabContainer1.ClientID %>_body")
                obj.style.display = (obj.style.display == "none") ? "block" : "none";
            }

            // Add a button to the ribbon -> Top right
            function AddHelpButton() {
                try {
                    var divTag = document.createElement("div");
                    divTag.setAttribute("style", "float:right")
                    divTag.innerHTML = "<img src=\"./Img/HelpIcon.png\">";
                    document.body.appendChild(divTag);

                    var temp_bar = document.getElementById("<%=this.TabContainer1.ClientID %>_header");
                    temp_bar.insertBefore(divTag, temp_bar.firstChild);
                } catch (e) { alert(e); }
            }

            // Toggle a Tab 
            function ToggleTab() {
                var obj = document.getElementById("__tab_<%=TabPanel2.ClientID %>");
                obj.style.display = (obj.style.display == "none") ? "block" : "none";
            }

            // Toggle the FileMenu
            function ToggleFileMenu() {
                var the_menu = document.getElementById("SBRibbon_FileMenu");
                SBRibbon.ShowMenu(the_menu, "<%=this.Ribbon_FileMenu1.ClientID %>_FileMenu");
            }

            // Change File Menu color using CSS
            function ChangeFileMenuClass() {
                var the_menu = document.getElementById("SBRibbon_FileMenu");
                the_menu.className = "Ribbon_FileMenu_purple";
            }
    </script>  
    
    <p> 
    <button onclick="ToggleRibbon()" type="button">Toggle the ribbon</button><br />
    <button onclick="AddHelpButton()" type="button">Add help button</button><br />
    <button onclick="ToggleTab()" type="button">Show/Hide last tab</button><br />
    <button onclick="ToggleFileMenu()" type="button">Show/Hide file menu</button><br />
    <button onclick="ChangeFileMenuClass()" type="button">Change File menu color</button><br />
    </p>


    <script>
        // Keep this code at the end of the page
        if (typeof SBRibbon == "undefined") {
            alert("SBRibbon is not defined. Include Ribbon/Ribbon.js in the head section of this page");
        }
        else {
            // Not necessary : It will add a "FileMenu" to the ribbon (top left)
            // Register the "FileMenu" Control using a JS method
            // Use this function to choose the color of the menu -> See last parameter (green, purple, blue, green(default))
            SBRibbon.RegisterFileMenu("Fichier", "<%=this.TabContainer1.ClientID %>", "<%=this.Ribbon_FileMenu1.ClientID %>", "green");
        }
    </script>
    
    </form>
    </body>
</html>
